<template>
    <div>
        <h1>欢迎来到首页</h1>
        <AppAlert>
            这是一个自动导入的组件。
        </AppAlert>
        pre: {{ data }}
        <div>
            <el-button type="primary">Primary Button</el-button>
        </div>
        <div id="myMap" ref="myMap" style="width:300px;height:300px"></div>
        <el-table :data="stus" style="width: 100%">
            <el-table-column prop="name" label="姓名"></el-table-column>
        </el-table>
    </div>
</template>

<script setup lang="ts">
// definePageMeta({
//   middleware: ["auth"]
// })

const { data } = await useFetch('/api/hello');
let  stus = data.value?.[0];
//如何在模板中使用d

const { $eChart } = useNuxtApp()
const myMap = ref<HTMLElement>()
onMounted(() => {
    const myChart = $eChart.init(myMap.value!);
    // 指定图表的配置项和数据
    const option = {
        series: [
            {
                name: '饼图',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: '河南' },
                    { value: 735, name: '河北' },
                    { value: 580, name: '江西' },
                    { value: 484, name: '湖南' },
                    { value: 300, name: '湖北' }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
})
</script>